<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 120 120"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path fill="#00407B" d="M60.07 97.535H30.656a.76.76 0 0 1-.761-.762v-41.32a.76.76 0 0 1 .761-.762H66.82l2.203-2.203 6.07-6.07h21.692a.76.76 0 0 1 .762.762v14.308a3.746 3.746 0 0 0 3.75 3.75 3.746 3.746 0 0 0 3.75-3.75V47.18a8.26 8.26 0 0 0-8.262-8.262H75.023V15a7.5 7.5 0 0 0-7.5-7.5H15A7.5 7.5 0 0 0 7.5 15v67.523a7.5 7.5 0 0 0 7.5 7.5h7.383v6.739a8.26 8.26 0 0 0 8.262 8.261h29.414a3.745 3.745 0 0 0 3.75-3.75c.011-2.062-1.664-3.738-3.739-3.738Zm-41.496-15A3.573 3.573 0 0 1 15 78.961V18.574A3.573 3.573 0 0 1 18.574 15H63.95a3.573 3.573 0 0 1 3.574 3.574v24.797l-3.808 3.809h-33.06a8.26 8.26 0 0 0-8.261 8.261v27.082h-3.82v.012Z"/><path fill="#0075DB" d="m111.398 106.102-10.523-10.524a3.033 3.033 0 0 0-.363-.316c4.84-7.29 4.054-17.215-2.368-23.637a18.685 18.685 0 0 0-13.265-5.496 18.685 18.685 0 0 0-13.266 5.496c-7.324 7.324-7.324 19.207 0 26.531a18.686 18.686 0 0 0 13.266 5.496c3.621 0 7.242-1.043 10.371-3.129.094.129.2.247.316.364l10.524 10.523a3.717 3.717 0 0 0 2.648 1.102c.961 0 1.922-.364 2.649-1.102a3.745 3.745 0 0 0 .011-5.308Zm-26.52-9.973a11.177 11.177 0 0 1-7.956-3.293 11.197 11.197 0 0 1-3.293-7.957c0-3 1.172-5.836 3.293-7.957a11.197 11.197 0 0 1 7.957-3.293c3.012 0 5.836 1.172 7.957 3.293 4.383 4.383 4.383 11.531 0 15.914a11.217 11.217 0 0 1-7.957 3.293ZM56.273 33.762H26.262c-2.074 0-3.762-1.676-3.75-3.75a3.746 3.746 0 0 1 3.75-3.75h30.011a3.746 3.746 0 0 1 3.75 3.75 3.746 3.746 0 0 1-3.75 3.75Z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Solutionskey1 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
